<template>
  <v-card class="mx-auto" max-width="300">
    <v-img src="../assets/NavBg.jpeg">
      <v-card-title>
        <v-col align="center">
          <v-avatar size="130" color="grey">
            <img src="../assets/avator.jpeg" alt />
          </v-avatar>
          <div class="ma-4 white--text">weject</div>
        </v-col>
      </v-card-title>
      <v-divider></v-divider>
    </v-img>

    <v-card-title>About Me:</v-card-title>
    <v-card-text>人哪有好的，只是坏的程度不一样而已。</v-card-text>
<!--    分割线-->
    <v-divider color="indigo"></v-divider>

    <v-list nav dense>
      <v-list-item>
        <v-list-item-icon class="ma-3">
          <v-icon color="blue darken-2">{{'mdi-qqchat'}}</v-icon>
        </v-list-item-icon>
        <v-list-item-content class="grey--text">1140968804</v-list-item-content>
      </v-list-item>
    </v-list>
    <v-list nav dense>
      <v-list-item>
        <v-list-item-icon class="ma-3">
          <v-icon color="green darken-2">{{'mdi-wechat'}}</v-icon>
        </v-list-item-icon>
        <v-list-item-content class="grey--text">1140968804</v-list-item-content>
      </v-list-item>
    </v-list>
    <v-list nav dense>
      <v-list-item>
        <v-list-item-icon class="ma-3">
          <v-icon color="orange darken-2">{{'mdi-sina-weibo'}}</v-icon>
        </v-list-item-icon>
        <v-list-item-content class="grey--text">1140968804</v-list-item-content>
      </v-list-item>
    </v-list>
    <v-list nav dense>
      <v-list-item>
        <v-list-item-icon class="ma-3">
          <v-icon color="primary">{{'mdi-facebook'}}</v-icon>
        </v-list-item-icon>
        <v-list-item-content class="grey--text">1140968804</v-list-item-content>
      </v-list-item>
    </v-list>
    <v-list nav dense>
      <v-list-item>
        <v-list-item-icon class="ma-3">
          <v-icon color="indigo">{{'mdi-email'}}</v-icon>
        </v-list-item-icon>
        <v-list-item-content class="grey--text">1140968804</v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

<script>
export default {
  name: "Nav"
}
</script>

<style scoped>

</style>